.task-dashboard {
  width: 100%;
  background-color: #f8f8f8;
  .task-dashboard-navbar {
    width: 100%;
    position: fixed;
    z-index: 999;
    .nut-navbar--placeholder {
      background-color: #fff;
    }
    .nut-navbar {
      box-shadow: none;
      .my-file-list-menu {
        .nut-menu {
          display: flex;
          .nut-menu__bar {
            box-shadow: none;
            .nut-menu__item {
              margin-right: 32rpx;
              height: 60rpx;
              text-align: center;
              line-height: 60rpx;
              display: inline-block;
              .nut-menu__title {
                font-size: 28rpx;
                line-height: 60rpx;
                color: #101010;
              }
              .nut-menu__title-icon {
                // display: none;
                .nutui-iconfont {
                  font-size: 14rpx;
                }
              }
            }
          }
        }
        .my-file-list-menu-text {
          font-size: 24rpx;
          color: #101010;
          text {
            font-size: 32rpx;
            color: #1e74fd;
          }
        }
      }
    }
  }
  .task-dashboard-content {
    width: 100%;
    height: 100%;
    .task-dashboard-content-item {
      width: 100%;
      .dashboard-con-title {
        width: 100%;
        height: 530rpx;
        background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
        .con-title-box {
          display: flex;
          justify-content: space-between;
          padding: 108rpx 32rpx 0;
          box-sizing: border-box;
        }
        .dashboard-con-title-left {
          width: 60%;
          .title-text {
            font-weight: 600;
            font-size: 44rpx;
            color: #101010;
            .iconfont{
              font-size: 40rpx;
              padding-left: 10rpx;
            }
          }
          .title-department {
            display: flex;
            align-items: center;
            margin: 20rpx 0;
            img {
              width: 112rpx;
              height: 44rpx;
            }
            text {
              font-size: 28rpx;
              color: #101010;
            }
          }
          .title-time {
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }
        }
        .dashboard-con-title-right {
          width: 40%;
          img {
            width: 256rpx;
            height: 245rpx;
          }
        }
      }
      .dashboard-con-total {
        width: 100%;
        margin-top: -50rpx;
        .dashboard-total-box {
          width: 90%;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          padding: 20rpx 0;
          box-sizing: border-box;
          .dashboard-total-item {
            width: 202rpx;
            height: 122rpx;
            background: #ecf3ff;
            border-radius: 24rpx;
            padding-top: 16rpx;
            box-sizing: border-box;

            text {
              display: block;
              text-align: center;
            }
            text:nth-of-type(1) {
              font-weight: 600;
              font-size: 36rpx;
              color: #001840;
            }
            text:nth-of-type(2) {
              font-weight: 400;
              font-size: 24rpx;
              color: #77869f;
            }
          }
          .dashboard-total-item:nth-of-type(1) {
            text:nth-of-type(1) {
              color: #ff0c00;
            }
          }
        }
      }
    }
    .task-trends {
      width: 100%;
      .task-trends-box {
        width: 100%;
        margin: 0 auto;
        background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
        border-radius: 40rpx 40rpx 0 0;
        margin-top: -40rpx;
        .task-trends-title {
          width: 100%;
          height: 88rpx;
          font-weight: 600;
          border-radius: 24rpx;
          padding: 52rpx 0 0 32rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          img {
            width: 40rpx;
            height: 40rpx;
          }
          text {
            padding-left: 10rpx;
            font-size: 32rpx;
            color: #101010;
          }
        }
        .task-trends-content {
          width: 100%;
          .task-trends-content-item {
            width: 100%;
            padding: 100rpx 40rpx 0;
            box-sizing: border-box;

            .trends-content-toBegin {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              color: #101010;
              .nut-divider {
                width: 66rpx;
                height: 2rpx;
                margin: 0 0 0 20rpx;
                background-color: #dadada;
              }
              .nut-divider.nut-divider-hairline::before,
              .nut-divider.nut-divider-hairline::after {
                opacity: 0;
              }
              .trends-content-toBegin-num {
                font-size: 28rpx;
                color: #101010;
                text-align: center;
                line-height: 92rpx;
                position: relative;
                z-index: 2;
                .triangle-up-num {
                  display: block;
                  width: 458rpx;
                  height: 92rpx;
                  background: #3080ff;
                  border-radius: 16rpx;
                  font-weight: 600;
                }
                .triangle-up {
                  position: absolute;
                  width: 400rpx;
                  top: -80rpx;
                  left: 0;
                  right: 0;
                  margin: auto;
                  font-weight: 400;
                  text-align: center;
                }
                .triangle-down {
                  position: absolute;
                  left: 0;
                  right: 0;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 190rpx solid #f4f4f4;
                  border-right: 220rpx solid transparent;
                  border-left: 220rpx solid transparent;
                  border-bottom: 190rpx solid transparent;
                }
                .triangle-down-num {
                  position: absolute;
                  top: 74rpx;
                  left: 0;
                  right: 0;
                  margin: 0 auto;
                  color: #999;
                  font-weight: 400;
                  font-size: 24rpx;
                }
              }
            }
            .trends-content-inProgress {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              color: #101010;
              margin: 60rpx 0;

              .nut-divider {
                width: 116rpx;
                height: 2rpx;
                margin: 0 0 0 20rpx;
                background-color: #dadada;
              }
              .nut-divider.nut-divider-hairline::before,
              .nut-divider.nut-divider-hairline::after {
                opacity: 0;
              }
              .trends-content-inProgress-num {
                z-index: 2;
                color: #101010;
                text-align: center;
                line-height: 92rpx;
                position: relative;
                .inProgress-num {
                  display: block;
                  width: 362rpx;
                  height: 92rpx;
                  background: #01dcaf;
                  border-radius: 16rpx;
                  font-weight: 600;
                  font-size: 28rpx;
                }
                .triangle-down {
                  position: absolute;
                  left: 0;
                  right: 0;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 80rpx solid #f4f4f4;
                  border-left: 170rpx solid transparent;
                  border-right: 170rpx solid transparent;
                  border-bottom: 80rpx solid transparent;
                }
                .triangle-down-num {
                  position: absolute;
                  top: 70rpx;
                  left: 0;
                  right: 0;
                  margin: 0 auto;
                  color: #999;
                  font-weight: 400;
                  font-size: 24rpx;
                }
              }
            }
            .trends-content-completed {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              color: #101010;
              .nut-divider {
                width: 250rpx;
                height: 2rpx;
                margin: 0 0 0 20rpx;
                background-color: #dadada;
              }
              .nut-divider.nut-divider-hairline::before,
              .nut-divider.nut-divider-hairline::after {
                opacity: 0;
              }
              .trends-content-completed-num {
                z-index: 2;
                width: 96rpx;
                height: 92rpx;
                background: #ffc400;
                border-radius: 16rpx;
                font-weight: 600;
                font-size: 28rpx;
                color: #101010;
                text-align: center;
                line-height: 92rpx;
              }
            }
          }
          // 任务趋势图1
          .task-trends-content-item.active1 {
            .trends-content-toBegin {
              z-index: 10;
              display: flex;
              align-items: center;
              font-size: 28rpx;
              color: #101010;
              .nut-divider {
                width: 250rpx;
                height: 2rpx;
              }
              .trends-content-toBegin-num {
                .triangle-up-num {
                  width: 96rpx;
                  height: 92rpx;
                }
                .triangle-up {
                  position: absolute;
                  top: -80rpx;
                  left: -150rpx;
                  right: 0;
                  margin: auto;
                  font-weight: 400;
                  text-align: center;
                }
                .triangle-down {
                  z-index: -10;
                  position: absolute;
                  top: 0;
                  left: -120rpx;
                  right: 0;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 80rpx solid transparent;
                  border-left: 170rpx solid transparent;
                  border-right: 170rpx solid transparent;
                  border-bottom: 80rpx solid #f4f4f4;
                }
              }
            }
            .trends-content-inProgress {
              .trends-content-inProgress-num {
                .triangle-down {
                  z-index: -10;
                  position: absolute;
                  left: -40rpx;
                  right: 0;
                  bottom: -70rpx;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 180rpx solid transparent;
                  border-right: 220rpx solid transparent;
                  border-left: 220rpx solid transparent;
                  border-bottom: 180rpx solid #f4f4f4;
                }
              }
            }

            .trends-content-completed {
              .nut-divider {
                width: 66rpx;
              }
              .trends-content-completed-num {
                width: 458rpx;
                height: 92rpx;
              }
            }
          }
          // 任务趋势图2
          .task-trends-content-item.active2 {
            .trends-content-toBegin {
              z-index: 10;
              display: flex;
              align-items: center;
              font-size: 28rpx;
              color: #101010;
              .nut-divider {
                width: 116rpx;
              }

              .trends-content-toBegin-num {
                .triangle-up-num {
                  width: 362rpx;
                  height: 92rpx;
                }
                .triangle-up {
                  position: absolute;
                  top: -80rpx;
                  left: -150rpx;
                  right: 0;
                  margin: auto;
                  font-weight: 400;
                  text-align: center;
                }
                .triangle-down {
                  z-index: -10;
                  position: absolute;
                  left: 0;
                  right: 0;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 80rpx solid #f4f4f4;
                  border-left: 170rpx solid transparent;
                  border-right: 170rpx solid transparent;
                  border-bottom: 80rpx solid transparent;
                }
              }
            }
            .trends-content-inProgress {
              .nut-divider {
                width: 250rpx;
              }
              .trends-content-inProgress-num {
                .inProgress-num {
                  width: 96rpx;
                }
                .triangle-down {
                  z-index: -10;
                  position: absolute;
                  left: -170rpx;
                  right: 0;
                  bottom: -70rpx;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 80rpx solid transparent;
                  border-right: 220rpx solid transparent;
                  border-left: 220rpx solid transparent;
                  border-bottom: 80rpx solid #f4f4f4;
                }
              }
            }

            .trends-content-completed {
              .nut-divider {
                width: 66rpx;
              }
              .trends-content-completed-num {
                width: 458rpx;
                height: 92rpx;
              }
            }
          }
          // 任务趋势图3
          .task-trends-content-item.active3 {
            .trends-content-toBegin {
              z-index: 10;
              display: flex;
              align-items: center;
              font-size: 28rpx;
              color: #101010;
              .nut-divider {
                width: 116rpx;
              }

              .trends-content-toBegin-num {
                .triangle-up-num {
                  width: 362rpx;
                  height: 92rpx;
                }
                .triangle-up {
                  position: absolute;
                  top: -80rpx;
                  left: -150rpx;
                  right: 0;
                  margin: auto;
                  font-weight: 400;
                  text-align: center;
                }
                .triangle-down {
                  z-index: -10;
                  position: absolute;
                  left: -40rpx;
                  right: 0;
                  bottom: -60rpx;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 150rpx solid transparent;
                  border-left: 220rpx solid transparent;
                  border-right: 220rpx solid transparent;
                  border-bottom: 150rpx solid #f4f4f4;
                }
              }
            }
            .trends-content-inProgress {
              .nut-divider {
                width: 66rpx;
              }
              .trends-content-inProgress-num {
                .inProgress-num {
                  width: 458rpx;
                }
                .triangle-down {
                  z-index: -10;
                  position: absolute;
                  left: 0;
                  right: 0;
                  bottom: -140rpx;
                  margin: auto;
                  width: 0;
                  height: 0;
                  border-top: 70rpx solid #f4f4f4;
                  border-right: 220rpx solid transparent;
                  border-left: 220rpx solid transparent;
                  border-bottom: 70rpx solid transparent;
                }
              }
            }

            .trends-content-completed {
              .nut-divider {
                width: 250rpx;
              }
              .trends-content-completed-num {
                width: 96rpx;
              }
            }
          }
          .task-trends-content-status {
            margin: 7% 20% 0;
            padding-bottom: 50rpx;
            box-sizing: border-box;
            .content-status-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .status-item-text {
                display: flex;
                align-items: center;
                line-height: 40rpx;
                text {
                  display: inline-block;
                }
                text:nth-of-type(1) {
                  width: 16rpx;
                  height: 16rpx;
                  border-radius: 50%;
                  background: #3080ff;
                }
                text:nth-of-type(2) {
                  font-size: 24rpx;
                  color: #101010;
                  margin-left: 10rpx;
                }
              }
              .status-item-text:nth-of-type(2) {
                text:nth-of-type(1) {
                  width: 16rpx;
                  height: 16rpx;
                  border-radius: 50%;
                  background: #01dcaf;
                }
              }
              .status-item-text:nth-of-type(3) {
                text:nth-of-type(1) {
                  width: 16rpx;
                  height: 16rpx;
                  border-radius: 50%;
                  background: #ffc400;
                }
              }
            }
          }
        }
      }
    }
    .user-situation {
      margin-top: 20rpx;
      background-color: #fff;
      .user-situation-title {
        width: 100%;
        height: 88rpx;
        font-weight: 600;
        border-radius: 24rpx;
        padding: 52rpx 0 0 32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        img {
          width: 40rpx;
          height: 40rpx;
        }
        text {
          padding-left: 10rpx;
          font-size: 32rpx;
          color: #101010;
        }
      }
      .user-situation-content {
        width: 100%;
        height: 600rpx;
        // .user-situation-content-item {
        //   width: 90%;
        //   margin: 60rpx auto;
        //   display: flex;
        //   align-items: center;
        //   justify-content: space-between;
        //   .content-item-left {
        //     width: 20%;
        //     font-size: 24rpx;
        //     color: #999999;
        //   }
        //   .content-item-right {
        //     width: 80%;
        //     height: 24rpx;
        //     background-color: #f5f5f5;
        //     text {
        //       height: 24rpx;
        //     }
        //     text:nth-of-type(1) {
        //       background-color: #1e74fd;
        //     }
        //     text:nth-of-type(2) {
        //       background-color: #00e1ca;
        //     }
        //     text:nth-of-type(2) {
        //       background-color: #999;
        //     }
        //   }
        // }
      }
    }
    .emergency-task-dashboard {
      margin-bottom: 30rpx;
      .emergency-task-dashboard-box {
        height: 600rpx;
        margin-top: 20rpx;
        background-color: #fff;
        .task-dashboard-title {
          width: 100%;
          height: 88rpx;
          font-weight: 600;
          border-radius: 24rpx;
          padding: 52rpx 0 0 32rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          img {
            width: 40rpx;
            height: 40rpx;
          }
          text {
            padding-left: 10rpx;
            font-size: 32rpx;
            color: #101010;
          }
        }
        .emergency-dashboard-content {
          width: 100%;
          height: 600rpx;
          position: relative;
          .emergency-dashboard-total {
            width: 100%;
            position: absolute;
            top: 64%;
            left: 0;right: 0;
            margin: auto;
            .dashboard-total-item {
              width: 90%;
              margin: 0 auto;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .dashboard-total-item-text {
                text{
                  display: block;
                  text-align: center;
                }
                text:nth-of-type(1) {
                  font-size: 24rpx;
                  color: #999999;
                }
                text:nth-of-type(2) {
                  font-weight: 600;
                  font-size: 44rpx;
                  color: #101010;
                }
              }
            }
          }
        }
      }
    }
    .logo-bottom {
      width: 100%;
      height: 100rpx;
      text-align: center;
      img {
        width: 287rpx;
        height: 38rpx;
      }
    }
  }
}
